<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="260"
      :columns="columnsBooking"
      :fetchapi="fetchApi"
      selectionType="single"
      :params="fetchParams"
      :onSyncTableData="getSyncTableData"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="columns => (this.selectColumn = columns)"
    />
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确定</el-button>
    </div>
  </div>
</template>

<script>
import { queryChooseVin } from '@/api/repair/precontract/precontractStatus';
import { getPinpSelect, getChexSelectTable, getCheModelSelectTable } from '@/api/repair/repairReception/customer/brand.js';

import moment from 'moment';
export default {
  name: 'vinModel',
  props: ['license'],
  data() {
    this.syncTableData = [];
    return {
      defaultSelections: [],
      fetchApi: queryChooseVin,
      topFilterList: this.createTopFilterList(),
      columnsBooking: this.createTableColumnsPart(),
      fetchParams: { xhrAbort: false },
      selectColumn: [],
      brandList: [],
      seriesList: [],
      modelList: []
    };
  },
  mounted() {
    // this.queryChooseVinInfo();
    this.queryBrand();
    this.querySeries();
    this.queryModel();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: '请输入...',
          itemList: []
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName',
          placeholder: '请选择...',
          itemList: []
        }
        // {
        //     type: 'INPUT',
        //     label: '手机号',
        //     fieldName: 'contactorMobile',
        //     placeholder: '请输入...',
        //     itemList: []
        // }
      ];
    },
    createTableColumnsPart() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          width: 180
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '品牌',
          dataIndex: 'BRAND',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'checkbox',
          filterItems: [],
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '车系',
          dataIndex: 'SERIES',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'checkbox',
          filterItems: [],
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '车型',
          dataIndex: 'MODEL',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          showOverflowTooltip: true,
          editable: false,
          editType: 'select',
          editItems: []
        }
      ];
    },

    // 查询所有品牌(供table使用)
    async queryBrand() {
      const res = await getPinpSelect();
      let tableTarget = this.columnsBooking.find(x => x.dataIndex === 'BRAND');
      tableTarget.editItems = tableTarget.filterItems = res.data.map(x => ({ value: x.brandId + '', text: x.brandName }));
    },
    // 查询所有车系(供table使用)
    async querySeries() {
      const res = await getChexSelectTable();
      let tableTarget = this.columnsBooking.find(x => x.dataIndex === 'SERIES');
      tableTarget.editItems = tableTarget.filterItems = res.data.map(x => ({ value: x.seriesId + '', text: x.seriesName }));
    },
    // 查询所有车型(供table使用)
    async queryModel() {
      const res = await getCheModelSelectTable();
      let tableTarget = this.columnsBooking.find(x => x.dataIndex === 'MODEL');

      tableTarget.editItems = tableTarget.filterItems = res.data.map(x => ({ value: x.modelId + '', text: x.modelName, model: x.modelCode }));
    },
    getSyncTableData(list) {
      this.syncTableData = list;
      if (list !== null && list.length === 1) {
        this.defaultSelections.push(this.syncTableData[0]);
      }
    },
    queryChooseVinInfo() {
      this.topFilterList.find(x => x.fieldName === 'license').initialValue = this.license || '';
      this.fetchParams = Object.assign({}, { license: this.license }, { xhrAbort: false });
    },

    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },

    async saveDialog() {
      if (!this.selectColumn.length) {
        this.$notify.error({ title: '提示信息', message: '请选择一条记录!' });
        return;
      }
      let vin = this.selectColumn[0].VIN;
      let license = this.selectColumn[0].LICENSE;
      this.$emit('saveDialog', this.selectColumn);
    },

    closeDialog() {
      this.$emit('closeDialog', false);
    }
  }
};
</script>

<style lang="less" scoped></style>
